<template>
    <div class="content-head" ref="content-head">
        <div class="project-head">
            <div class="left">
                <div class="project-round">
                    <span></span>
                </div>
                <div class="project-detail">
                    <p>{{title}}</p>
                    <p>{{content}}</p>
                </div>
            </div>
        </div>
        <div class="scroll-up" v-if="showScroll">
            <div class="scroll-icon" @click="scrollUp">
                <Icon type="md-arrow-round-up"></Icon>
            </div>
        </div>
    </div>
</template>

<script>
    export default {
        name: 'contentHead',
        data(){
            return {
                showScroll: false
            };
        },
        props: ['title', 'content'],
        mounted() {
            let _this = this;
            window.onscroll = function () {
                let a = document.documentElement.scrollTop || document.body.scrollTop;
                let b = document.documentElement.clientHeight || document.body.clientHeight;
                let c = document.documentElement.scrollHeight || document.body.scrollHeight;

                if (a > 0 && (a > 103 || _this.$refs['content-head'].className.indexOf('head-fixed') > -1)) {
                    _this.$refs['content-head'].className = 'content-head head-fixed';
                    _this.showScroll = true;
                } else {
                    _this.$refs['content-head'].className = 'content-head';
                    _this.showScroll = false;
                }
                _this.$emit('showScrollChange', _this.showScroll);

                if (a + b === c) {
                    _this.$emit('scroll-end');
                }
            };
        },
        methods:{
            scrollUp(){
                let _this = this;
                setTimeout(function () {
                    let a = document.documentElement.scrollTop || document.body.scrollTop;
                    if (a > 0) {
                        a -= (document.documentElement.scrollHeight || document.body.scrollHeight)/50;
                        if (document.documentElement.scrollTop) {
                            document.documentElement.scrollTop = a;
                        } else if (document.body.scrollTop) {
                            document.body.scrollTop = a;
                        }
                        _this.scrollUp();
                    }
                }, 7);
            }
        }
    };
</script>

<style scoped lang="less">
    .content-head {
        background-color: #fff;
        padding: 16px 32px;
        border-bottom: 1px solid #e9eaec;
        transition-property: padding;
        transition-duration: 500ms;

        .scroll-up{
            position: fixed;
            right: 16px;
            bottom: 38px;
            .scroll-icon{
                width: 37px;
                height: 37px;
                border-radius: 50%;
                background-color: #2d8cf0;
                text-align: center;
                vertical-align: middle;
                display: table-cell;
                cursor: pointer;
                box-shadow: 3px 3px 4px rgba(45, 140, 240, 0.2);
                i {
                    font-size: 28px;
                    color: #fff;
                }
            }
        }

        .project-head{
            display: flex;
            width: 1024px;
            justify-content: space-between;
            margin: 0 auto;
            align-items: center;

            .left {
                display: flex;
                .project-detail {
                    padding: 6px 32px;
                    p{
                        color: #9ea7b4;
                        &:first-child{
                            font-size: 16px;
                            font-weight: 600;
                            color: #657180;
                        }
                    }
                }
                .project-round {
                    border-radius: 4px;
                    background-color: #2d8cf0;
                    padding: 8px 9px;
                    height: 54px;

                    span {
                        border-radius: 50%;
                        width: 35px;
                        height: 35px;
                        background-color: #fff;
                        display: block;
                    }
                }
            }
            .project-switch{
                padding: 12px 32px;
            }
        }
    }

    .head-fixed{
        position: fixed;
        width: 100%;
        top: 0;
        z-index: 999;
        padding: 8px 32px;
    }
</style>